<template>
  <div>
    <header-nav></header-nav>
    <van-index-bar :index-list="singer">
      <div v-for="(item, index) in rightsinger" :key="index">
        <van-index-anchor :index="item.name" />
        <van-cell v-for="value in item.data" :key="value.id">
          <template #title>
            <div class="van-cell-title">
              <img width="45" height="45" :src="value.img1v1Url" />
              <span class="custom-title">{{ value.name }}</span>
            </div>
          </template>
        </van-cell>
      </div>
    </van-index-bar>
    <div class="bottom">
      <van-tabbar active-color="#ee0a24" inactive-color="#ccc" v-model="active">
        <van-tabbar-item
          class="iconfont icon-wangyiyunyinle1-copy"
          @click="recommend"
          >首页</van-tabbar-item
        >
        <van-tabbar-item class="iconfont icon-huatong" @click="singers"
          >歌手</van-tabbar-item
        >
        <van-tabbar-item class="iconfont icon-peoples" @click="podcast"
          >关注</van-tabbar-item
        >
        <van-tabbar-item class="iconfont icon-paihang" @click="ranking"
          >榜单</van-tabbar-item
        >
        <van-tabbar-item
          class="iconfont icon-shejiao-yinle-copy"
          @click="$router.push('/userInfo').catch(() => {})"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import { getSinger } from "../api/singer";
import headerNav from "../components/headerNav.vue";

export default {
  data() {
    return {
      singer: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"],
      rightsinger: [],
      active: 1,
    };
  },
  methods: {
    ArtistListFun() {
      for (let i = 0; i < this.singer.length; i++) {
        this.rightsinger.push({
          name: this.singer[i],
        });
      }
    },
    recommend() {
      this.$router.push("/recommend");
    },
    singers() {
      this.$router.push("/singer");
    },
    ranking() {
      this.$router.push("/ranking");
    },
    podcast() {
      this.$router.push("/podcast");
    },
  },
  components: { headerNav },
  created() {
    this.ArtistListFun();
    for (let i = 0; i < this.singer.length; i++) {
      getSinger({
        type: 1,
        area: 96,
        initial: this.singer[i],
      }).then((data) => {
        let index = this.rightsinger.findIndex(
          (item) => item.name == this.singer[i]
        );
        this.$set(this.rightsinger[index], "data", data.artists);
      });
    }
  },
};
</script>
<style lang="less">
.van-cell-title {
  display: flex;
  align-items: center;
  span {
    margin-left: 20px;
  }
}
.van-index-anchor {
  margin-top: 42px;
  background-color: #d9dadb;
}
.bottom {
  width: 100%;
  height: 30px;
  position: fixed;
  padding: 5px 0;
  left: 0px;
  bottom: 0px;
  z-index: 10;
  background-color: white;
}
</style>
